<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="jq/jquery2.0.3/jquery-2.0.3.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>

<body>

    <!-- 模态框声明 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <!-- 窗口声明 -->
        <div class="modal-dialog" role="document">

            <!-- 内容声明 -->
            <div class="modal-content">

                <!-- 头部、主体、脚部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                       
                    </form>
                </div>
                <div class="modal-footer">

                    <!-- data-dismiss="modal"  关闭模态框-->
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doClose()">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <!-- 使用普通按钮打开一个模态框：data-toggle="modal" data-target="指定哪个模态框" -->
    <input type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" value="使用普通按钮打开模态框">

    <!-- 使用a标签打开模态框:data-toggle="modal"  href="指定哪个模态框" -->
    <a href="#myModal" data-toggle="modal" class="btn btn-primary">使用a标签打开模态框</a>

    <!-- 使用js的方式打开模态框 -->
    <input type="button" class="btn btn-primary" id="btnOpen" value="使用js的方式打开模态框">
    <script>
        $("#btnOpen").click(function(){
            $("#myModal").modal("show");//显示模态框
        });
        function doClose(){
            $("#myModal").modal("hide");//隐藏模态框
        }
    </script>
</body>

</html>